<template>
	<view>
		<page-head :title="'详情'" :headtype="2"></page-head>
		<view class="status marginAuto mainColor" v-if="datas.status == 1">待分配</view>
		<view class="status marginAuto mainColor" v-if="datas.status == 2">待审核</view>
		<view class="status marginAuto mainColor" v-if="datas.status == 3">已分配</view>
		<view class="status marginAuto mainColor" v-if="datas.status == 4">已取消</view>
		<view class="endtimeeach marginAuto">
			<view class="endtimetitle flex">
				<view>{{ datas.detail.goods_name }}</view>
				<view class="endtimebtn flex">
					<text>报价倒计时：</text>
					<text v-if="countdown <= 0">已结束</text>
					<uv-count-down
					v-if="countdown > 0"
					:time="countdown * 1000" 
					format="DD HH:mm:ss"
					@change="djschange"
					@finish="djsend(datas.detail.goods_end_time)">
					<view class="flex">
						<view class="djseach" style="margin-right: 10rpx;">{{ timeData.days>=10?timeData.days:'0'+timeData.days }}天</view>
						<view class="djseach">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours }}</view>
						:<view class="djseach">{{ timeData.minutes >= 10 ? timeData.minutes : '0'+ timeData.minutes }}</view>
						:<view class="djseach">{{ timeData.seconds >= 10 ? timeData.seconds : '0'+ timeData.seconds }}</view>
					</view>
					</uv-count-down>
				</view>
			</view>
			<view class="endtimemain flex">
				<view class="endtimeimg">
					<image v-if="!datas.detail.goods_image" :src="apifun.serveimg+'homegoods.png'" mode=""></image>
					<image v-if="datas.detail.goods_image" :src="apifun.URLimg+datas.detail.goods_image" mode=""></image>
				</view>
				<view class="endtimemsg">
					<view class="endtimemsg-title">预售数量(吨): <text style="font-weight:600;">{{ datas.detail.goods_total }}</text></view>
					<view class="endtimemsg-convert">
						<view class="converteach" v-if="datas.detail.goods_sku_detail" v-for="(item,index) in datas.detail.goods_sku_detail" :key="index">{{ item.min }}吨-{{ item.max }}吨以内{{ item.price }}元</view>
					</view>
				</view>
			</view>
		</view>
		<view class="prottitle marginAuto">报单信息</view>
		<view class="protmsg marginAuto">
			<view class="proteach flex">
				<view class="proteachtitle">公开报单量(吨):</view>
				<view class="proteachnum">{{ datas.num }}</view>
			</view>
			<view class="proteach flex">
				<view class="proteachtitle">单价(元):</view>
				<view class="proteachnum">{{ datas.price }}</view>
			</view>
			<view class="proteach flex">
				<view class="proteachtitle">报单时间：</view>
				<view class="proteachnum">{{ datas.create_time }}</view>
			</view>
			<view class="proteach flex" v-if="datas.status >= 2">
				<view class="proteachtitle">分配时间：</view>
				<view class="proteachnum">{{ timegs(datas.assign_time) }}</view>
			</view>
			<view class="proteach flex" v-if="datas.status >= 3">
				<view class="proteachtitle">审核时间：</view>
				<view class="proteachnum">{{ timegs(datas.audit2_time > 0 ? datas.audit2_time : datas.audit1_time) }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				apifun:this.apifun,
				timeData:{},
				countdown:'',
				datas:{
					detail:{
						goods_sku_detail:{}
					}
				}
			};
		},
		onLoad(option) {
			this.id = option.id;
			this.initData()
		},
		methods: {
			initData(){
				let sendData = {
					order_id:this.id
				}
				this.apifun.unirequest('/user/user/getOrderDetail','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.datas = datas;
						this.countdown = datas.detail.goods_end_time - parseInt(new Date().getTime()/1000)
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			djschange(e){
				this.timeData = e;
			},
			djsend(item){
				this.$set(item,'countdown',0)
			},
			timegs(time){
				return uni.$uv.timeFormat(time,'yyyy-mm-dd hh:MM:ss')
			}
		},
	};
</script>

<style scoped lang="scss">
	page{
		background:#FBFBFB;
	}
	.status{
		width: 690rpx;
		font-size: 40rpx;
		line-height:100rpx;
		font-weight: 600;
	}
	.endtimeeach{
		width: 630rpx;
		padding: 20rpx 30rpx;
		background:#fff;
		border-radius: 10rpx;
		margin-top: 20rpx;
		.endtimetitle{
			padding:0rpx 0 24rpx;
			line-height:50rpx;
			color:#333333;
			font-size: 30rpx;
			border-bottom: 1px dashed #F1F1F1;
			font-weight: 600;
			justify-content: space-between;
			.endtimebtn{
				padding: 0 20rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				color: #fff;
				border-radius: 10rpx;
				font-size:24rpx;
				background-color: #FFF5F5;
				color:#E51818;
				.djseach{
					color:#E51818;
				}
			}
		}
		
		.endtimemain{
			margin-top: 24rpx;
			.endtimeimg{
				width: 140rpx;
				margin-right: 20rpx;
				image{
					width: 140rpx;
					height: 140rpx;
					border-radius: 10rpx;
				}
			}
			.endtimemsg{
				.endtimemsg-title{
					margin-top: 20rpx;
					color:#333333;
					font-size: 30rpx;
				}
				.endtimemsg-convert{
					margin-top: 20rpx;
					.converteach{
						display: inline-block;
						background:#F4F8FC;
						line-height: 52rpx;
						padding:0 10rpx;
						font-size:24rpx;
						color: #2340FF;
						margin-right: 20rpx;
						margin-bottom:10rpx;
					}
				}
			}
		}
	}
	.prottitle{
		width: 690rpx;
		line-height: 60rpx;
		padding:20rpx 0;
		font-size: 30rpx;
		color: #333333;
		font-weight: 600;
	}
	.protmsg{
		width: 610rpx;
		padding: 0 40rpx;
		background: #fff;
		border-radius: 10rpx;
		.proteach{
			justify-content: space-between;
			padding: 30rpx 0;
			border-bottom: 1px dashed #F1F1F1;
			.proteachtitle{
				font-size: 30rpx;
				color: #333333;
			}
			.proteachnum{
				font-size: 30rpx;
				color: #333333;
			}
		}
	}
</style>